{% if isFramework("javascript") %}
The interface for a custom floating filter component is as follows:

```ts
interface FloatingFilterDisplayComp {
    // Mandatory methods

    // Returns the HTML element for this floating filter.
    getGui(): HTMLElement;

    /** Called when the column definition or model is updated. */
    refresh(params: FloatingFilterDisplayParams): void;

    // Optional methods

    // The init(params) method is called on the floating filter once.
    // See below for details on the parameters.
    init(params: FloatingFilterDisplayParams): void;

    // Gets called every time the popup is shown, after the GUI returned in
    // getGui is attached to the DOM. This is useful for any logic that requires attachment
    // before executing, such as putting focus on a particular DOM element. 
    afterGuiAttached(params?: IAfterGuiAttachedParams): void;

    // Gets called when the floating filter is destroyed. Like column headers,
    // the floating filter lifespan is only when the column is visible,
    // so they are destroyed if the column is made not visible or when a user
    // scrolls the column out of view with horizontal scrolling.
    destroy(): void;
}
```

### Custom Floating Filter Parameters

The `init(params)` / `refresh(params)` methods take a params object with the items listed below. If custom params are provided via the `colDef.floatingFilterComponentParams` property, these will be additionally added to the params object, overriding items of the same name if a name clash exists.
{% /if %}
